<template>
  <div class="comp-qzf">
    <el-table
      ref="table"
      class="table table-left"
      :data="tableData"
      highlight-current-row
      row-key="id"
      height="390px"
      style="width: 508px"
      @row-click="handleRowClick"
    >
      <el-table-column prop="censusRegisterAddress" label="房屋地址">
        <template slot-scope="{row}">
          <el-tooltip effect="dark" :content="row.censusRegisterAddress" placement="top">
            <span class="line-clamp-1">{{ row.censusRegisterAddress }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="cmasterName" label="户主姓名" width="180"></el-table-column>
      <el-table-column prop="masterLinkPhone" label="户主电话" width="180"></el-table-column>
    </el-table>
    <el-table
      class="table table-right"
      :data="personTable"
      row-key="id"
      height="390px"
      style="width: 100%"
    >
      <el-table-column prop="name" label="姓名" width="140" align="center"></el-table-column>
      <el-table-column prop="idCard" label="居住证号" width="200"></el-table-column>
      <el-table-column prop="linkPhone" label="联系电话" width="140"></el-table-column>
      <el-table-column prop="residenceAddress" label="户籍地址">
        <template slot-scope="{row}">
          <el-tooltip effect="dark" :content="row.residenceAddress" placement="top">
            <span class="line-clamp-1">{{ row.residenceAddress }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "CompQzf",
  props: {
    info: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableData: [],
      personTable: []
    }
  },
  watch: {
    info: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          this.tableData = val
          if (val[0]) {
            this.$refs.table.setCurrentRow(val[0])
            this.personTable = val[0].persons
          }
        }
      }
    }
  },
  methods: {
    handleRowClick(row, column, event) {
      this.personTable = row.persons
    }
  }
}
</script>

<style lang="scss" scoped>
  .comp-qzf {
    display: flex;
    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td{
      background-color: transparent!important;
    }
    ::v-deep .table-left {
      border-right: 2px solid #17195D;
      td, th {
        &:first-child {
          padding-left: 14px;
        }
      }
      .current-row {
        position: relative;
        td {
          background-color: transparent!important;
          color: #3E94FF;
        }
        &::after {
          display: block;
          content: "";
          width: 9px;
          height: 16px;
          background: url("../../../../assets/dp-imgs/curr-arrow@2x.png") no-repeat;
          background-size: 100% 100%;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
</style>
